<template>
  <div id="shopcart">
    <div v-for="(item,i) in items[0]" :key="i" class="item" >
      <div class="left">
        <img :src="item.img" alt="" width="80px" height="80px">
      </div>
      <div class="right">
        <h3>{{item.name}}</h3>
        <strong style="color:red">{{item.new}}</strong>
        <span @click="reduce(item.id)" >-</span>
        <span>{{item.num}}</span>
        <span @click="plus(item.id)">+</span>
      </div>
    </div>
    <div class="all">
      <p>您已选择<span style="color:red">{{ $store.getters.num }}</span>商品</p>
      <p>总价:<span style="color:red">{{$store.getters.allnum}}</span>元(rmb)</p>
      <mt-button type="primary" size="large">立即购买</mt-button>
    </div>

  </div>
</template>
<script>
export default {
  name:'shopcart',
  data(){
    return {
      num : 0,
      allnum:0,
      items:[]
    }
  },
  methods:{
      reduce(item){
        this.$store.commit('reduce',item)

      },
      plus(item){
      this.$store.commit('plus',item)

    }
  },

  created(){
    this.items.push(this.$store.state.items)

    this.$store.state.items.forEach(element => {
      this.num+=element.num
    this.num = this.$store.state.num
        this.allnum = this.$store.state.allnum
        console.log(this.allnum)

    })

  },
  updated(){
    this.num = this.$store.getters.num
  }

  }



</script>
<style lang="less" scope>
  #shopcart{
    .item{
      width: 99%;
      height: 84px;
      border: 1px solid #ccc;
      margin-bottom: 3px;
      .left{
        margin: 2px 5px;
        height: 80px;
        width: 80px;
        float: left;
      }
      .right{
        float: left;
        h3{
          padding:10px;

        }
        span{
          display: inline-block;
          border: 1px solid #ccc;
          width: 20px;
          text-align: center;
          font-size: 16px;

        }
      }
    }
    .all p{
      padding:5px;
    }
  }
</style>
